<template>
	<view>
		<view class="u-skeleton">
			<view class="status_bar">
			    <view class="top_view"></view>  
			</view>
			<view class="avatar-img">
				<view class="avatar-con">
					<image class="avatar u-skeleton-circle" @click="_login" v-if="!isLogin" src="../../static/images/avatar.png" mode=""></image>
					<image v-else class="avatar u-skeleton-circle" :src="memberInfo.avatar || require('../../static/images/avatar.png')" mode="" @click="navTo('/pages/setting/personal-info')"></image>
					<view class="login u-skeleton-fillet" @click="_login" v-if="!isLogin">点击登录</view>
					<view class="login u-skeleton-fillet" v-else @click="navTo('/pages/setting/personal-info')">{{ memberInfo.nickname}}</view>
					<view class="setting u-skeleton-rect" @click="navTo('/pages/setting/setting')">
						<view class="iconfont iconshezhi"></view>
						<view class="sett">设置</view>
					</view>
				</view>
				<view class="money-con">
					<view class="money u-skeleton-fillet" @click="navTo('/pages/user/balance')">
						<text>钱包</text>
						<text class="num">{{ memberInfo.balance || 0 }}</text>
					</view>
					<view class="line"></view>
					<view class="money u-skeleton-fillet">
						<text>积分</text>
						<text class="num">0</text>
					</view>
				</view>
			</view>
			<view class="black-card" :style="{height: scrollTop <= 80 ? '324rpx' : '134rpx'}">
				<view class="content">
					<view class="top">
						<view class="counselor">
							<view class="title u-skeleton-fillet">私人法律顾问</view>
							<view class="time u-skeleton-fillet" v-if="memberInfo.card.id">{{ $utils.msToDate(memberInfo.card.end_time*1000).withoutTime }} 到期</view>
							<view class="time" v-else>尊享5大权益</view>
						</view>
						<view class="look-btn u-skeleton-fillet" @click="navTo('/pages/user/svip-service')" v-if="memberInfo.card.id">查看权益</view>
						<view class="look-btn u-skeleton-fillet" @click="navTo('/pages/user/vip-service')" v-else>查看详情</view>
					</view>
					<view class="bottom">
						<image class="img u-skeleton-fillet" src="https://oss.arapp.net/img/user_card_01.png" mode=""></image>
						<image class="img u-skeleton-fillet" src="https://oss.arapp.net/img/user_card_02.png" mode=""></image>
						<image class="img u-skeleton-fillet" src="https://oss.arapp.net/img/user_card_03.png" mode=""></image>
						<image class="img u-skeleton-fillet" src="https://oss.arapp.net/img/user_card_04.png" mode=""></image>
						<image class="img u-skeleton-fillet" src="https://oss.arapp.net/img/user_card_05.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="order">
				<view class="order-header">
					<view class="ar-font-souce u-skeleton-fillet">我的订单</view>
					<view class="more u-skeleton-fillet" @click="navTo('/pages/order/order?status=0')">
						<text style="padding-right: 2rpx;">查看全部</text>
						<view class="iconfont icongengduo"></view>
					</view>
				</view>
				<view class="order-status">
					<view class="order-item" @click="navTo('/pages/order/order?status=1')">
						<image class="one u-skeleton-fillet" src="https://oss.arapp.net/img/dai_zhi_fu.png" mode=""></image>
						<text class="u-skeleton-fillet">待支付</text>
					</view>
					<view class="order-item" @click="navTo('/pages/order/order?status=2')">
						<image class="u-skeleton-fillet" src="https://oss.arapp.net/img/jin_xing_zhong.png" mode=""></image>
						<text class="u-skeleton-fillet">进行中</text>
					</view>
					<view class="order-item" @click="navTo('/pages/order/order?status=3')">
						<image class="u-skeleton-fillet" src="https://oss.arapp.net/img/yi_wan_cheng.png" mode=""></image>
						<text class="u-skeleton-fillet">已完成</text>
					</view>
					<view class="order-item" @click="navTo('/pages/order/order?status=0')">
						<image class="u-skeleton-fillet" src="https://oss.arapp.net/img/yi_qu_xiao.png" mode=""></image>
						<text class="u-skeleton-fillet">已取消</text>
					</view>
				</view>
			</view>
			<view class="cell-list">
				<view class="item" v-if="memberInfo.card.id" @click="navTo('private')">
					<view class="name">
						<view class="iconfont icongeren6" style="font-size: 28rpx;padding: 0 26rpx;"></view>
						<view class="title u-skeleton-fillet">私人律师</view>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="line"></view>
				</view>
				<view class="item" @click="navTo('/pages/setting/personal-info')">
					<view class="name">
						<view class="iconfont iconwodedianjizhuangtai-" style="font-size: 34rpx;padding: 0 22rpx;"></view>
						<view class="title u-skeleton-fillet">个人资料</view>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="line"></view>
				</view>
				<view class="item" @click="navTo('/pages/user/favorite')">
					<view class="name">
						<view class="iconfont iconshoucang" style="font-size: 36rpx;padding: 0 22rpx;"></view>
						<view class="title u-skeleton-fillet">我的收藏</view>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="line"></view>
				</view>
				<view class="item" @click="navTo('/pages/user/share')">
					<view class="name">
						<view class="iconfont iconxinxi1" style="font-size: 28rpx;padding: 0 26rpx;"></view>
						<view class="title u-skeleton-fillet">邀请体验</view>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="line"></view>
				</view>
			</view>
			<view class="cell-list">
				<view class="item" @click="navTo('/pages/setting/problem-feedback')">
					<view class="name">
						<view class="iconfont iconxiaoxi-" style="font-size: 34rpx;padding: 0 22rpx;"></view>
						<view class="title u-skeleton-fillet">投诉建议</view>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="line"></view>
				</view>
				<view class="item" @click="_getService">
					<view class="name">
						<view class="iconfont icon54" style="font-size: 36rpx;padding: 0 22rpx;"></view>
						<view class="title u-skeleton-fillet">客服中心</view>
						<view class="iconfont icongengduo"></view>
					</view>
					<view class="line"></view>
				</view>
			</view>
			<view style="text-align: center;margin-top: 20rpx;" @click="navTo('/pages/user/recharge')">
				<!-- <image src="https://oss.arapp.net/defaut-img/2.png" mode="" style="height: 196rpx;width: 680rpx;border-radius: 4px;"></image> -->
				<image src="https://oss.arapp.net/defaut-img/3.png" mode="" style="height: 196rpx;width: 680rpx;border-radius: 4px;"></image>
			</view>
			<view :class="['copyright', {'padd': screenHeight > 736 }]">
				<view>Copyright ©2015-2020 浙江安瑞律师事务所</view>
				<view> All Rights Reserved.</view>
			</view>
			
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import { getMemberInfo } from '../../api/userApi.js'
	import { getService } from '../../api/globalApi.js'
 	export default {
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				scrollTop: 0,
				memberInfo: {mobile: '点击登录',nickname: '点击登录',card: {id: '',end_time: ''}},
				isLogin: uni.getStorageSync('isLogin'),
				isRefresh: uni.getStorageSync('isRefresh'),
				disabledClick: true, // 点击一次
				screenHeight: 0
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.screenHeight)
					this.screenHeight = res.screenHeight // 获取屏幕高度
				}
			})
			setTimeout(() => {
				this.loading = false
				console.log(this.isLogin)
				this.isLogin = uni.getStorageSync('isLogin')
				this.isRefresh = uni.getStorageSync('isRefresh')
				if (this.isLogin) this._getMemberInfo()
			}, 1000)
		},
		onShow() {
			const token = uni.getStorageSync('token')
			if (!token) {
				this.memberInfo.card.id = ''
			}
			const isLogin = uni.getStorageSync('isLogin')
			const isRefresh = uni.getStorageSync('isRefresh')
			console.log(this.isLogin)
			console.log(isLogin)
			console.log(this.isRefresh)
			this.isLogin = isLogin
			this.isRefresh = isRefresh
			if (this.isLogin && this.isRefresh) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0,
					success: () => {
						uni.startPullDownRefresh()
					}
				})
			}
		},
		onHide() {
			uni.setStorage({
			    key: 'isRefresh',
			    data: false,
			    success: ()=> {
			        console.log('isRefresh的false设置成功')
			    }
			})
		},
		watch: {
			isLogin(val) {
				this.isLogin = val
				console.log(val)
			}
		},
		onPageScroll(e) {
			// setTimeout(() => {
				
			// }, 500)
			// console.log(e.scrollTop)
			this.scrollTop = parseInt(e.scrollTop)
			// console.log(this.scrollTop)
		},
		onPullDownRefresh() {
			console.log('refresh')
			setTimeout(()=> {
				const login = uni.getStorageSync('isLogin')
				console.log(login)
				this.isLogin = login
				this._getMemberInfo(()=> {
					uni.stopPullDownRefresh()
				}) // 获取当前登陆用户信息
			}, 1000)
		},
		methods: {
			async _getService(){
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({title: '请先登录',icon: 'none'})
					setTimeout(() => {
						this._login()
					}, 500)
				} else {
					uni.showLoading({mask:true,title:'请稍后'})
					let ret=await getService()
					console.log(ret)
					uni.hideLoading()
					uni.navigateTo({
						url:'/pages/HM-chat/HM-chat?userId='+ret.data.data.id+'&nickName='+ret.data.data.nickname
					})
				}
			},
			async _getMemberInfo(callback) {
				const res = await getMemberInfo()
				console.log(res)
				if (res.data.code === 3) {
					uni.setStorage({
					    key: 'isLogin',
					    data: false,
					    success: ()=> {
							this.isLogin = false
					    }
					})
					// uni.setStorageSync('isLogin', false)
				} else {
					this.memberInfo = res.data.data
					console.log(this.memberInfo)
				}
				callback && callback()
			},
			navTo(data) {
				if (data === '/pages/setting/setting') {
					uni.navigateTo({url: data})
				} else if (data === '/pages/setting/personal-info') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: data})
					}
				} else if (data === '/pages/user/favorite') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: data})
					}
				} else if (data === '/pages/setting/problem-feedback') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: data})
					}
				} else if (data === '/pages/order/order?status=0') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: data})
					}
				} else if (data === '/pages/user/svip-service') {
					uni.navigateTo({url: data})
				} else if (data === '/pages/user/vip-service') {
					uni.navigateTo({url: data})
				} else if (data === '/pages/order/order?status=1') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: data})
					}
				} else if (data === '/pages/order/order?status=2') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: data})
					}
				} else if (data === '/pages/order/order?status=3') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: data})
					}
				} else if (data === 'private') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: `/pages/lawyer/lawyer-detail?id=${this.memberInfo.card.team_id}`})
					}
				} else if (data === '/pages/user/balance') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: `/pages/user/balance`})
					}
				} else if (data === '/pages/user/recharge') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: `/pages/user/recharge`})
					}
				} else if (data === '/pages/user/share') {
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.showToast({title: '请先登录',icon: 'none'})
						setTimeout(() => {
							this._login()
						}, 500)
					} else {
						uni.navigateTo({url: `/pages/user/share`})
					}
				}
			},
			async _login() {
				uni.showLoading({mask:true,title:'请稍后'})
				if (this.disabledClick) {
					// #ifdef APP-PLUS
					this.disabledClick = false
					const res = await this.$login()
					console.log(res)
					if (res === 'fail') {
						uni.removeStorageSync('token')
						uni.navigateTo({url:'/pages/login/login'})
					}
					setTimeout(() => {
						this.disabledClick = true
					}, 1000)
					uni.hideLoading()
					// #endif
					// #ifdef H5
					uni.navigateTo({url:'/pages/login/login'})
					// #endif
				} else {
					uni.hideLoading()
					return
				}
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f7f9;
		height: 100%;
	}
	.status_bar {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    background-color: #f6f7f9;
	}  
	.top_view {  
	    height: var(--status-bar-height);  
	    width: 100%;  
	    position: fixed;  
	    background-color: #fff;  
	    top: 0;  
	    z-index: 999;  
	}
	.cell-bg {
		background-color: #f7f8f9;
	}
	.avatar-img {
		display: flex;
		flex-direction: column;
		padding-top: 44px;
		// height: 139px;
		height: 183px;
		background: url(../../static/images/user_header_bg.png) #fff top right no-repeat;
		background-size: 25%;
		.avatar-con {
			display: flex;
			.avatar {
				width: 120rpx;
				height: 120rpx;
				margin-left: 64rpx;
				border-radius: 50%;
			}
			.login {
				height: 50rpx;
				font-family: PingFangSC-Medium;
				font-size: 40rpx;
				color: #1a1a1a;
				margin-top: 26rpx;
				margin-left: 20rpx;
				font-weight: 800;
			}
			.setting {
				height: 50px;
				display: flex;
				flex-direction: column;
				margin-left: auto;
				margin-right: 44rpx;
				// margin-top: 20rpx;
				justify-content: center;
				.iconfont {
					font-size: 50rpx;
					color: #5b5e67;
					margin-right: 2rpx;
				}
				.sett {
					font-family: PingFangSC-Medium;
					font-size: 24rpx;
					color: #5b5e67;
					opacity: 0.8;
					margin-left: 2rpx;
				}
			}
		}
		.money-con {
			display: flex;
			// margin-top: 30rpx;
			margin: 30rpx 30rpx 0;
			.money {
				width: 50%;
				text-align: center;
				display: flex;
				flex-direction: column;
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #1a1a1a;
				opacity: 0.8;
				.num {
					font-family: PingFangSC-Medium;
					font-size: 40rpx;
					color: #d9b975;
					padding-top: 4rpx;
				}
			}
			.line {
				width: 2rpx;
				height: 43rpx;
				background-color: #626262;
				opacity: 0.5;
				margin-top: 20rpx;
			}
		}
	}
	.order {
		background-color: $uni-bg-color;
		margin-top: 20rpx;
		height: 250rpx;
		.order-header {
			display: flex;
			font-size: 38rpx;
			color: #2c313c;
			padding: 33rpx 46rpx 0 33rpx;
			align-items: center;
			font-weight: 800;
			.more {
				margin-left: auto;
				font-size: 24rpx;
				color: #bec4ca;
				opacity: 0.8;
				display: flex;
				align-items: center;
				font-weight: normal;
				.iconfont {
					font-size: 24rpx;
					color: #bec4ca;
					font-weight: normal;
				}
			}
		}
		.order-status {
			display: flex;
			justify-content: space-around;
			.order-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 37rpx 0;
				image {
					width: 57rpx;
					height: 64rpx;
				}
				// .one {
				// 	width: 64rpx;
				// 	height: 56rpx;
				// }
				text {
					font-size: 24rpx;
					color: #626262;
					padding-top: 10rpx;
				}
			}
			
		}
	}
	.cell-list {
		margin-top: 20rpx;
		background-color: #fff;
		// padding: 0 35rpx;
		.item {
			.name {
				height: 100rpx;
				// border-bottom: 1rpx solid #f6f7f9;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #747477;
				width: 94%;
				margin: 0 auto;
				.icongengduo {
					// margin-left: auto;
				}
				.title {
					flex: 1;
				}
				.iconfont {
					padding: 0 23rpx;
				}
			}
			.line {
				height: 1rpx;
				width: 94%;
				margin: 0 auto;
				background-color: #f6f7f9;
			}
		}
		.item:active {
			background-color: #f7f8f9;
		}
	}
	.copyright {
		font-size: 24rpx;
		color: #747477;
		text-align: center;
		// padding: 66rpx 0 10rpx;
		padding: 66rpx 0 70rpx;
	}
	.padd {
		padding: 66rpx 0 244rpx;
	}
	.black-card {
		padding: 0 35rpx;
		background-color: #fff;
		overflow: hidden;
		// transition: 'all 0.2s ease';
		transition: all 0.2s ease;
		.content {
			// height: 323rpx;
			// height: 133rpx;
			background: url(../../static/images/user_black_card.jpg) no-repeat center;
			background-size: 100%;
			border-radius: 15rpx;
			overflow: hidden;
			padding-bottom: 20rpx;
			.top {
				display: flex;
				align-items: center;
				margin: 0 30rpx;
				padding: 24rpx 0 30rpx;
				.counselor {
					.title {
						font-size: 40rpx;
						color: #fcd5b8;
						font-weight: 800;
					}
					.time {
						font-size: 25rpx;
						color: #a7aebf;
						margin-top: 8rpx;
					}
				}
				.look-btn {
					margin-left: auto;
					width: 180rpx;
					height: 57rpx;
					text-align: center;
					line-height: 57rpx;
					font-size: 25rpx;
					color: #12275c;
					background-image: linear-gradient(1deg,#f7c1a0 0%,#fcd7ba 100%),linear-gradient(#ffefc4,#ffefc4);
					border-radius: 29rpx;
					&:active {
						opacity: .9;
					}
				}
			}
			.bottom {
				margin: 0 30rpx;
				display: flex;
				justify-content: space-between;
				.img {
					width: 81rpx;
					height: 139rpx;
				}
			}
		}
	}
</style>
